<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="favicon.ico" type="image/x-icon" >
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="/css/fontawesome-all.css">
    <link rel="stylesheet" href="/css/index.css?v=3">
    <title>Wechat Records</title>
</head>
<body>
    <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
        <a class="navbar-brand" href="/">
            <img alt="LOGO" src="/images/logo.png">
            <span>Wechat Records</span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbar-menu" class="navbar-collapse collapse justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item dropdown active">
                    <a href="javascript:" class="nav-link dropdown-toggle" data-toggle="dropdown">
                        <i class="far fa-user"></i>
                        <span>{{user_name}}</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:" class="dropdown-item logout-menu-item">Logout</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <div id="container" class="container">
        <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary search-button" data-toggle="collapse" data-target="#search-panel">
                <i class="fa fa-search"></i>
                Search
                <i class="fa collapsable-icon"></i>
            </button>
            <button type="button" class="btn btn-outline-primary download-button">
                <i class="fa fa-download"></i>
                Download
            </button>
        </div>
        <div id="search-panel" class="collapse box show">
            <form id="search-form">
                <input name="page_number" type="hidden" value="1">
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label>Start date</label>
                        <div class="input-group date-picker">
                            <input name="start_date" value={{today}} type="text" class="form-control">
                            <div class="input-group-append input-group-addon">
                                <span class="input-group-text">
                                    <i class="far fa-calendar-alt"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label>End date</label>
                        <div class="input-group date-picker">
                            <input name="end_date" value={{today}} type="text" class="form-control">
                            <div class="input-group-append input-group-addon">
                                <span class="input-group-text">
                                    <i class="far fa-calendar-alt"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label>From user</label>
                        <div class="input-group">
                            <select name="from_user" class="form-control">
                                <option value=""></option>
                                <option value="-" disabled>{Room}</option>
                                %for user in users:
                                    <option value="{{user['user_id']}}">{{user['name']}}</option>
                                %end
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label>Time zone</label>
                        <div class="input-group">
                            <select name="timezone" class="form-control">
                                <option value=""></option>
                                %for timezone in timezones:
                                    <option value="{{timezone}}">{{timezone}}</option>
                                %end
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-6">
                        <label>Sort</label>
                        <div class="input-group">
                            <select name="sort" class="form-control">
                                <option value=""></option>
                                <option value="asc">Ascending</option>
                                <option value="desc">Descending</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label>Page size</label>
                        <div class="input-group">
                            <select name="page_size" class="form-control">
                                <option value=""></option>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>
                                <option value="50">50</option>
                                <option value="60">60</option>
                                <option value="70">70</option>
                                <option value="80">80</option>
                                <option value="70">90</option>
                                <option value="80">100</option>
                            </select>
                        </div>
                    </div>
                </div>
                <button id="reset-button" type="reset" class="btn btn-secondary">Reset</button>
                <button id="submit-button" type="button" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <div id="data-list-group" class="data-list-group">
            <nav id="pagination-bar" class="pagination-bar"></nav>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr class="bg-light">
                            <th scope="col" class="w8 index">Sequance</th>
                            <th scope="col" class="w5">Action</th>
                            <th scope="col" class="w8 overflow">From user</th>
                            <th scope="col" class="w8 overflow">To user list</th>
                            <th scope="col" class="w20">Time</th>
                            <th scope="col" class="w8">Type</th>
                            <th scope="col" class="w20 overflow">Content</th>
                            <th scope="col" class="w5 center">File</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="data-modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Message</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="data-form">
                        <div class="form-group">
                            <label>Sequance</label>
                            <input type="text" name="sequance" readonly class="form-control">
                        </div>
                        <div class="form-group">
                            <label>ID</label>
                            <input type="text" name="id" readonly class="form-control">
                        </div>
                        <div class="form-group">
                            <label>From user</label>
                            <input type="text" name="from_user" readonly class="form-control">
                        </div>
                        <div class="form-group">
                            <label>To user list</label>
                            <input type="text" name="to_user_list" readonly class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Room ID</label>
                            <div class="input-group">
                                <input type="text" name="room_id" readonly class="form-control">
                                <div class="input-group-append">
                                    <a href="javascript:" class="btn btn-outline-primary room-button">
                                        <i class="fa fa-filter"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Time</label>
                            <input type="text" name="message_time" readonly class="form-control">
                        </div>
                        <div class="form-group message-type">
                            <label>Type</label>
                            <input type="text" name="message_type" readonly class="form-control">
                            <div class="input-group d-none">
                                <input type="text" name="message_type" readonly class="form-control">
                                <div class="input-group-append">
                                    <a target="_self" href="javascript:" class="btn btn-outline-primary">
                                        <i class="fa fa-link"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Content</label>
                            <textarea name="content" rows="3" readonly class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Raw data</label>
                            <textarea name="raw_data" rows="3" readonly class="form-control"></textarea>
                        </div>
                        <div class="form-group file d-none">
                            <label>File</label>
                            <div class="input-group">
                                <input type="text" name="file_path" readonly class="form-control">
                                <div class="input-group-append">
                                    <a target="_blank" href="#" class="btn btn-outline-primary file-button">
                                        <i class="far fa-file"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group files d-none">
                            <label>Chatrecord Files</label>
                            <div class="input-group d-none">
                                <input type="text" readonly class="form-control">
                                <div class="input-group-append">
                                    <a target="_blank" href="#" class="btn btn-outline-primary">
                                        <i class="far fa-file"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="file-container"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/moment.en-ca.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/js/index.js?v=7"></script>
</body>
</html>
